import React from 'react'
import { useNavigate } from 'react-router-dom'
import { SaveSelect } from '../../myTypes'

export default function AttentionList(props: {
  style: {
    readonly [key: string]: string
  }
  leftSelect: Array<SaveSelect>
  rightSelect: Array<SaveSelect>
}) {
  const { style, leftSelect, rightSelect } = props
  const navigate = useNavigate()
  function goCircleDetail(isVideo: boolean, id: string, type: string) {
    if (isVideo) {
      navigate(`/video?circleid=${id}`, { state: { type: type } })
    } else {
      navigate(`/circleget?circleid=${id}`, { state: { type: type } })
    }
  }
  return (
    <div className={style['select-list']}>
      <div className={style['select-items']}>
        {leftSelect.map((s, i) => {
          return (
            <div key={i} className={style['select-item']} onClick={() => goCircleDetail(s.isVideo === 1, s.id, s.type)}>
              <div className={style['select-pic']}>
                {s.isVideo !== 1 && <img src={s.img} alt="" />}
                {s.isVideo === 1 && <video width="100%" src={s.img} poster={s.img}></video>}
                {s.isVideo === 1 && (
                  <div className={style.icon} style={{ right: '5px', top: '5px', transform: 'none' }}>
                    <img src="/static/use/icon-video-play-fff.png" alt="" />
                  </div>
                )}
              </div>
              <div className={style.title}>{s.title}</div>
              <div className={style.user}>
                <div className={style['user-info']}>
                  <div className={style['user-head']}>
                    <img src={s.circleUser.head} alt="" />
                  </div>
                  <div className={style.nickname}>{s.circleUser.name}</div>
                </div>
                <div className={style.zero}>···</div>
              </div>
            </div>
          )
        })}
      </div>
      <div className={style['select-items']}>
        {rightSelect.map((s, i) => {
          return (
            <div key={i} className={style['select-item']} onClick={() => goCircleDetail(s.isVideo === 1, s.id, s.type)}>
              <div className={style['select-pic']}>
                {s.isVideo !== 1 && <img src={s.img} alt="" />}
                {s.isVideo === 1 && <video width="100%" src={s.img} poster={s.img}></video>}
                {s.isVideo === 1 && (
                  <div className={style.icon} style={{ right: '5px', top: '5px', transform: 'none' }}>
                    <img src="/static/use/icon-video-play-fff.png" alt="" />
                  </div>
                )}
              </div>
              <div className={style.title}>{s.title}</div>
              <div className={style.user}>
                <div className={style['user-info']}>
                  <div className={style['user-head']}>
                    <img src={s.circleUser.head} alt="" />
                  </div>
                  <div className={style.nickname}>{s.circleUser.name}</div>
                </div>
                <div className={style.zero}>···</div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
